<template>
	<view>
		<input v-if="!name" class="form-input-block" disabled="true" value="" :placeholder="placeholder"
			@click="showPickerView" />
		<input v-else class="form-input-block" disabled="true" :value="name" :placeholder="placeholder"
			@click="showPickerView" />
		<uni-popup ref="popup" type="bottom">
			<view style="padding:15px">
				<view style="background-color: #ffffff;padding: 15px;border-radius: 25px;">
					<view class="row line-bottom" style="line-height: 30px;padding: 0 15px 15px 15px;">
						<view @click="cancel">取消</view>
						<view class="col-auto"></view>
						<view @click="comfirm">确认</view>
					</view>
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column v-for="(row,key) in rows" :key="key">
							<view class="item" v-for="(item,index) in row" :key="index" style="line-height: 34px;font-size: 16px;">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>


		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "gt-select-region",
		emits:['callBack'],
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			select_id: {
				type: [String, Number],
				default: ''
			},
			list: {
				type: [Array, Object],
				default: []
			}
		},
		data() {
			return {
				title: 'picker-view',
				visible: true,
				value: [],
				rows: [],
				name: ''

			}
		},
		computed: {},
		created() {

		},
		watch: {
			list(newVal, oldVal) {
				let tier = 1;
				for (let i in this.list) {
					if (this.list[i].tier) { //多列
						tier = tier < this.list[i].tier ? this.list[i].tier : tier;
					}
				}
				this.value = [];
				for (let i = 1; i <= tier; i++) {
					this.value.push(0);
				}
				this.changeColumn();
			}
		},
		methods: {
			changeColumn(){
				let tier = this.value.length;
				let oldRows = this.rows; 
				this.rows = [];
				let next_parent_id = null; //下一列父级编号
				for (let i = 1; i <= tier; i++) {
					// console.log('第',i,'层')
					if(this.value[i-1] > 0 && oldRows[i-1].length > 0){
						next_parent_id = oldRows[i-1][this.value[i-1]].id;
						this.rows.push(oldRows[i-1]);
						// console.log('沿用');
						continue;
					}
					if(i>2 && this.rows[i-2].length == 0){
						this.rows.push([]);
						console.log('无数据');
						continue;
					}
					// console.log('父级', next_parent_id)
					let row = [];
					let now_parent_id = next_parent_id; //当前父级编号
						// console.log('当前父级编号',now_parent_id);
					next_parent_id = null
					for (let x in this.list) {
						// console.log(this.list[x])
						if (this.list[x].tier) {
							// console.log('tier：',this.list[x].tier)
							// console.log('i：',i)
							if (this.list[x].tier == i) {
								if (i == 1) {
									row.push(this.list[x]);
									if (next_parent_id == null) {
											next_parent_id = this.list[x].id;
											// console.log('改变父级编号',now_parent_id);
									}
								} else if (this.list[x].parent_id == now_parent_id) {
									row.push(this.list[x]);
									if (next_parent_id == null) {
											next_parent_id = this.list[x].id;
											// console.log('改变父级编号',now_parent_id);
									}
								}
								
								
							}
				
						} else {
							row.push({
								id: x,
								name: this.list[x]
							});
						}
					}
						// console.log(row);
					this.rows.push(row);
				}
			},
			comfirm(e) {
				let rows_count = this.rows.length - 1;
				let value_count = this.value.length - 1;
				let row = this.rows[rows_count];
				row = row[this.value[value_count]];
				if(!row){
					this.$fun.showMsg('请选择');
					return false;
				}
				// console.log(row);
				if (row) {
					this.name = '';
					for(let i in this.value){
						let val = this.value[i];
						this.name += this.name == '' ? this.rows[i][val].name : '/'+this.rows[i][val].name;
					}
					this.$emit("update:select_id", row.id);
					this.$emit("callBack", row);
				}
				this.$refs.popup.close();
			},
			cancel() {
				this.$refs.popup.close();
			},
			showPickerView() {
				this.$refs.popup.open();
			},
			bindChange: function(e) {
				let newVal = e.detail.value;
				let unChange = true;
				// console.log(newVal);
				for(let i in newVal){
					// console.log(unChange,newVal[i],this.value[i]);
					if(unChange == true && newVal[i] != this.value[i]){
						unChange = false;
					}else if(unChange == false){
						newVal[i] = 0;
					}
				}
				this.value = newVal
				// console.log(this.value);
				this.changeColumn();
			},
			getRegion() {},
			updateRange() {}
		}
	}
</script>

<style>
	.picker-view {
		width: 100%;
		height: 300px;
		margin-top: 20px;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
